<template>
  <div class="c-pf c-w100 c-p-l0 c-p-b0 c-hh100 c-bg-white c-ph24 c-flex-row c-aligni-center">
    <div class="c-flex-row c-justify-sb c-aligni-center c-w100 c-h c-bd-t1">
      <span @click="prevPage" class="iconfont c-fc-gray">&#xe8f4;</span>
      <span class="c-textAlign-c c-fs24 c-fc-sblack">
        <input id="pageInput" type="text" @input="onInput" v-model="page" class="c-ww80 c-hh54 c-textAlign-c c-fs24 needsclick input-reset c-br8 c-fc-sblack" @keyup.enter="clickSearch" @focus="onFource">
        <span class="c-ph10">/</span>
        <span>{{totalPage}}</span>
      </span>
      <span @click="nextPage" class="iconfont c-fc-gray">&#xe8f5;</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      oldValue: 0,
    };
  },
  props: ["page", "totalPage"],
  methods: {
    nextPage() {
      if (this.page >= this.totalPage) {
        return;
      }
      let num = this.page;
      num++;
      this.$emit("changepage", num);
    },
    prevPage() {
      if (this.page == 1) {
        return;
      }
      let num = this.page;
      num--;
      this.$emit("changepage", num);
    },
    onInput(e) {
      this.page = e.target.value.replace(/[^\d]/g, "");
      this.page = this.page > this.totalPage ? this.totalPage : this.page;
      e.target.value = this.page;
    },
    clickSearch() {
      this.oldValue = this.page;
      if (this.page == null || this.page == '') {
        this.page = 1
      }
      this.$emit("changepage", this.page);
      document.querySelector("#pageInput").blur();
    },
    onFource(e) {
      this.element = e.target
    },
  },
  mounted() {
    this.oldValue = this.page;
  },
  destroyed() {
    window.onscroll = null
  }
};
</script>

<style scoped>
input:focus {
  outline: none;
}
</style>

